<script>
export default {
  name: "addToCart",
  data(){},
  methods:{
    addToCart(){}
  }
}
</script>

<template>
<div>
  <el-button type="text" class="button" @click="addToCart()"><i class="el-icon-shopping-cart-2" style="width: 50px"></i></el-button>
</div>
</template>

<style scoped>
.button {
  text-align: center;
  font-size: 25px;
  padding: 10px; /* 增加一些内边距，确保图标和文字不会紧贴边缘 */
  color: #42b983; /* 默认颜色 */
  margin-left: 50px;
  width: 40px; /* 设置按钮宽度 */
  height: 40px; /* 设置按钮高度 */
  border-radius: 50%; /* 设置边框半径为50%，使按钮成为圆形 */
  display: inline-flex; /* 使用flex布局，确保内容居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.3s; /* 平滑过渡效果 */
  border: none; /* 移除边框，如果需要可以设置边框 */
}

.button:hover {
  color: #ffffff; /* 鼠标悬停时改变文字颜色 */
  background-color: #42b983; /* 鼠标悬停时改变背景颜色 */
  cursor: pointer; /* 鼠标悬停时改变鼠标光标样式 */
  box-shadow: 0 2px 12px rgba(66, 185, 131, 0.5); /* 鼠标悬停时添加阴影 */
}
</style>


